<template>
  <el-dialog :title="title" v-model="dialogVisible" width="480px" :before-close="changeVisible">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="地区" prop="areaID">
        <el-select v-model="form.areaID" placeholder="请选择">
          <el-option v-for="item in options" :key="item.key" :label="item.label" :value="item.key">
            <span v-if="item.label == 'default'">默认</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="运费" prop="freight">
        <el-input v-model="form.freight" placeholder="请输入金额（元）"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="changeVisible">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { goodsOption } from "@/utils/interface";
import area from "@/api/area";

@Options({
  props: {
    isVisible: {
      type: Boolean,
      default: false,
    },
    tage: {
      type: Object,
      default: () => {},
    },
  },
  emits: ["update:isVisible", "callBack"],
})
export default class dialogFreight extends Vue {
  [x: string]: any;
  dialogVisible: Boolean = this.isVisible;
  data() {
    return {
      title: "新增运费",
      form: {
        areaID: "",
        province: "",
        freight: "",
      },
      rules: {
        areaID: [{ required: true, message: "不能为空", trigger: "change" }],
        freight: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
      options: [],
      areaObj: area.province_list, // 区域列表对象
    };
  }

  mounted() {
    if (this.tage.id) {
      this.title = "编辑运费";
      this.form = Object.assign({}, this.tage);
    }
    this.init();
  }

  init() {
    // 初始化 省 信息
    let nd = [
      {
        key: "0",
        label: "default",
      },
    ];
    let obj: any = this.areaObj;
    for (let i in obj) {
      nd.push({
        key: i,
        label: obj[i],
      });
    }
    this.options = nd;
  }

  // 确定提交
  onSubmit() {
    let el: any = this.$refs["form"];
    el.validate((valid: Boolean) => {
      if (valid) {
        this.form.province = this.areaObj[this.form.areaID];
        this.API.postFreight(this.form).then(() => {
          this.$message.success("操作成功！");
          this.$emit("callBack");
          this.changeVisible();
        });
      }
    });
  }

  changeVisible() {
    this.dialogVisible = this.dialogVisible ? false : true;
    this.$emit("update:isVisible", this.dialogVisible);
  }
}
</script>
